<template>
  <a-spin :spinning="loading">
    <!-- 头部信息 -->
    <div style="font-size: 16px;font-weight: bold;margin-bottom: 10px">退单申请</div>
    <span style="margin-left: 15px">历史退款金额：{{afterService.refundAmt}}</span>
    <span style="margin-left: 150px">剩余可退金额：{{afterService.leftAmt}}</span>
    <!-- 退单申请表格 -->
    <common-table
        :columns="refundColumns"
        :dataSource="afterService.orderRefundList"
        :scroll="{ x: 'max-content' }"
        :slots="['csticketId','refundDesc', 'suppMaterials']"
    >
    <template #suppMaterials="{record}">
        <el-image  v-if="record.suppMaterials" style="width: 80px; height: 80px"
            :preview-src-list="record.suppMaterials"
            :src="record.suppMaterials[0]"
            :hide-on-click-modal="true"
            fit="scale-down"
        />
      </template>
      <template #refundDesc="{record}">
        <el-image v-if="record.refundDesc" style="width: 80px; height: 80px"
            :preview-src-list="record.refundDesc"
            :src="record.refundDesc[0]"
            :hide-on-click-modal="true"
            fit="scale-down"
        />
      </template>
      <template #csticketId="{record}">
        <a @click="jumpToAfterServiceDetail(record.csticketId)">{{record.csticketId}}</a>
      </template>
    </common-table>
    <!-- 售后工单 -->
    <div style="font-size: 16px;font-weight: bold;margin-top: 10px">售后工单</div>
    <!-- 售后工单表格 -->
    <common-table
        :columns="afterServiceColumns"
        :dataSource="afterService.orderTicketList"
        :scroll="{ x: 'max-content' }"
        :slots="['csticketId']"
    >
      <template #csticketId="{record}">
        <a @click="jumpToAfterServiceDetail(record.csticketId)">{{record.csticketId}}</a>
      </template>
    </common-table>
  </a-spin>
</template>
<script setup>
import CommonTable from "@/components/commonTable/index.vue";
import {defineProps, ref,reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getTabTicket} from "@/api/standard/index.js";
import {message} from "ant-design-vue";
const router = useRouter()
const platform = ref(useRoute().query.platform)
const afterService = reactive({
  refundAmt:"",
  leftAmt:"",
  orderRefundList:[],
  orderTicketList:[]
})
const props = defineProps({
  orderId:{
    type:String,
    default:''
  },
  platform: {
    type: String,
    default: ''
  },
  orderInvoicedAmount:{
    type:String,
  }
})
const refundColumns = [
  {
    title:'退款时间',
    dataIndex:'refundTime',
    key:'refundTime',
    align:'center',
    fixed:'left',
  },
  {
    title:'工单号',
    dataIndex:'csticketId',
    key:'csticketId',
    align:'center',
    fixed:'left',
  },
  {
    title:'退款状态',
    dataIndex:'refundStatus',
    key:'refundStatus',
    align:'center',
    fixed:'left',
  },
  {
    title:'原因',
    dataIndex:'refundReason',
    key:'refundReason',
    align:'center',
  },
  {
    title:'退款平台',
    dataIndex:'refundPlatform',
    key:'refundPlatform',
    align:'center',
  },
  {
    title:'退款金额',
    dataIndex:'refundAmt',
    key:'refundAmt',
    align:'center',
  },
  {
    title:'退款sku',
    dataIndex:'refundSku',
    key:'refundSku',
    align:'center',
  },
  {
    title:'退款联邦税',
    dataIndex:'refundFederalTax',
    key:'refundFederalTax',
    align:'center',
  },
  {
    title:'退款省税',
    dataIndex:'refundProvincialTax',
    key:'refundProvincialTax',
    align:'center',
  },
  {
    title:'退款情况',
    dataIndex:'refundStatus',
    key:'refundStatus',
    align:'center',
  },
  {
    title:'妥投情况',
    dataIndex:'deliveredStatus',
    key:'deliveredStatus',
    align:'center',
  },
  {
    title:'退款邮箱',
    dataIndex:'refundEmail',
    key:'refundEmail',
    align:'center',
  },
  {
    title:'佐证材料',
    dataIndex:'suppMaterials',
    key:'suppMaterials',
    align:'center',
  },
  {
    title:'退款证明',
    dataIndex:'refundDesc',
    key:'refundDesc',
    align:'center',
    width:150,
  },
  {
    title:'描述',
    dataIndex:'refundNote',
    key:'refundNote',
    align:'center',
    width:250,
  },
]
const afterServiceColumns = [
  {
    title:'创建时间',
    dataIndex:'createTime',
    key:'createTime',
    align:'center',
  },
  {
    title:'工单号',
    dataIndex:'csticketId',
    key:'csticketId',
    align:'center',
  },
  {
    title:'流程名称',
    dataIndex:'flowName',
    key:'flowName',
    align:'center',
  },
  {
    title:'处理状态',
    dataIndex:'status',
    key:'status',
    align:'center',
  },
  {
    title:'更新时间',
    dataIndex:'updateTime',
    key:'updateTime',
    align:'center',
  },
  {
    title:'操作角色',
    dataIndex:'ticketCurRoleName',
    key:'ticketCurRoleName',
    align:'center',
  },
  {
    title:'操作人',
    dataIndex:'createBy',
    key:'createBy',
    align:'center',
  },
]
const loading = ref(false)
const jumpToAfterServiceDetail = (id) => {
  // console.log(id)
  window.open(import.meta.env.VITE_JUICE + 'pages/customerService/AllticketDetail?ticketId=' + id, '_blank')
}
const init = async () => {
  try{
    loading.value = true
    const res = await getTabTicket({orderId:props.orderId,orderInvoicedAmount:props.orderInvoicedAmount})

    let orderRefundList = (res.result.orderRefundList || []).map(data => {
      if(data.suppMaterials) {
        data.suppMaterials = data.suppMaterials.split(',')
      }
      if(data.refundDesc) {
        data.refundDesc = data.refundDesc.split(',')
      }
      return data
    })

    afterService.refundAmt = res.result.refundAmt
    afterService.leftAmt = res.result.leftAmt
    afterService.orderRefundList = orderRefundList
    afterService.orderTicketList = res.result.orderTicketList
  }catch (e) {
    message.error(e)
  }finally{
    loading.value = false
  }
  console.log(afterService)
}

defineExpose({
  init
})
</script>
<style scoped>

</style>
